<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>条件渲染</title>

</head>
<body>
   <div id="root">
    <h2 v-show="showTitle">{{title}};v-show是给元素加display:none的属性</h2>
    <h2 v-if="showTitle">{{title}};V-if是直接删除标签</h2>
     <button @click="showTitle=!showTitle">点我</button>
     v-if与template配合使用
     <template v-if="enjoy">
     <h2>有趣的走马灯</h2>
      <p v-if="show1">SpringBoot</p>
      <p v-if="!show1">.</p>
      <p v-if="show2">Mybatis</p>
      <p v-if="!show2">.</p>
      <p v-if="show3">Redis</p>
      <p v-if="!show3">.</p>
     </template>
     <br>
     <button @click="enjoy=!enjoy">点我</button>
  </div>
    
    
    
  <script>
  let app =   new Vue({
       el:'#root',
       data: {
         title: '欢迎你，勇者',
         showTitle:true,
         n:0,
         enjoy:true
       },
       computed:{
         show1:function(){
          return this.n%3==0
         },
         show2:function(){
          return this.n%3==1
         },
         show3:function(){
          return this.n%3==2
         }
       },methods: {
       
       }
    })
    

    setInterval(()=>{
      app.n++
    },500)

  </script>  
</body>
</html>